<!--
 The BSD 3-Clause License

 Copyright 2022 - DATATRONiQ GmbH (https://datatroniq.com)
 Copyright (c) 2018-2022 Klaus Landsdorf (http://node-red.plus/)
 All rights reserved.
 node-red-contrib-iiot-opcua
-->

<script type="text/javascript">
  RED.nodes.registerType('OPCUA-IIoT-Server-ASO', {
    category: 'IIoT',
    color: '#ABCDEF',
    defaults: {
      nodeId: {value: "", required: true},
      browsename: {value: "", required: true},
      displayname: {value: ""},
      objecttype: {value: "", required: true},
      datatype: {value: ""},
      value: {value: null},
      referenceNodeId: {value: "", required: true},
      referencetype: {value: ""},
      name: {value: ""}
    },
    inputs: 1,
    outputs: 1,
    align: "left",
    icon: "icon.png",
    label: function () {
      return this.name || "S-ASO";
    },
    labelStyle: function () {
      return this.name ? "node_label_italic" : "";
    },
    oneditprepare: function () {
      let node = this
      node.lookupItems = []

      let objecttypeLookupButton = $("#node-lookup-objecttype")
      let objecttypeInputField = $("#node-input-objecttype")

      objecttypeLookupButton.on("click", function () {
        objecttypeLookupButton.addClass('disabled')
        $.getJSON('opcuaIIoT/list/InstanceTypeIds', function (data) {
          objecttypeLookupButton.removeClass('disabled')
          node.lookupItems = []

          $.each(data, function (i, entry) {
            node.lookupItems.push({value: entry.nodeId, label: entry.label})
          })

          objecttypeInputField.autocomplete({
            source: node.lookupItems,
            minLength: 0,
            focus: function (event, ui) {
              objecttypeInputField.val(ui.item.label);
              return false;
            },
            select: function (event, ui) {
              objecttypeInputField.val(ui.item.label)
              return false;
            },
            close: function (event, ui) {
              objecttypeInputField.autocomplete("destroy")
            }
          }).autocomplete("search", "")
        })
      })

      let datatypeLookupButton = $("#node-lookup-datatype")
      let datatypeField = $("#node-input-datatype")

      datatypeLookupButton.on("click", function () {
        datatypeLookupButton.addClass('disabled')
        $.getJSON('opcuaIIoT/list/DataTypeIds', function (data) {
          datatypeLookupButton.removeClass('disabled')
          node.lookupItems = []

          $.each(data, function (i, entry) {
            node.lookupItems.push({value: entry.nodeId, label: entry.label})
          })

          datatypeField.autocomplete({
            source: node.lookupItems,
            minLength: 0,
            focus: function (event, ui) {
              datatypeField.val(ui.item.label);
              return false;
            },
            select: function (event, ui) {
              datatypeField.val(ui.item.label)
              return false;
            },
            close: function (event, ui) {
              datatypeField.autocomplete("destroy")
            }
          }).autocomplete("search", "")
        })
      })

      let referencetypeLookupButton = $("#node-lookup-referencetype")
      let referencetypeField = $("#node-input-referencetype")

      referencetypeLookupButton.on("click", function () {
        referencetypeLookupButton.addClass('disabled')
        $.getJSON('opcuaIIoT/list/ReferenceTypeIds', function (data) {
          referencetypeLookupButton.removeClass('disabled')
          node.lookupItems = []

          $.each(data, function (i, entry) {
            node.lookupItems.push({value: entry.nodeId, label: entry.label})
          })

          referencetypeField.autocomplete({
            source: node.lookupItems,
            minLength: 0,
            focus: function (event, ui) {
              referencetypeField.val(ui.item.label);
              return false;
            },
            select: function (event, ui) {
              referencetypeField.val(ui.item.label)
              return false;
            },
            close: function (event, ui) {
              referencetypeField.autocomplete("destroy")
            }
          }).autocomplete("search", "")
        })
      })

      let dataTypeRow = $("#node-input-datatype-row")
      let referenceTypeRow = $("#node-input-referencetype-row")

      objecttypeInputField.change(function () {
        if ($(this).val() !== '61') {
          node.datatype.required = true
          node.referencetype.required = true
          dataTypeRow.show()
          referenceTypeRow.show()
        } else {
          node.datatype.required = false
          node.referencetype.required = false
          dataTypeRow.hide()
          referenceTypeRow.hide()
        }
      })
    }
  });
</script>

<script type="text/x-red" data-template-name="OPCUA-IIoT-Server-ASO">
    <div class="form-row">
        <label for="node-input-nodeId"><i class="icon-tasks"></i> <span data-i18n="opcua-iiot-contrib.label.nodeId"></span></label>
        <input type="text" id="node-input-nodeId" placeholder="ns=1;s=MySwitch or ns=1;i=1234">
    </div>
    <div class="form-row">
        <label for="node-input-browsename"><i class="icon-tag"></i>
        <span data-i18n="opcua-iiot-contrib.label.browsename"></span></label>
        <input type="text" id="node-input-browsename" placeholder="">
    </div>
    <div class="form-row">
        <label for="node-input-displayname"><i class="icon-tag"></i>
        <span data-i18n="opcua-iiot-contrib.label.displayname"></span></label>
        <input type="text" id="node-input-displayname" placeholder="">
    </div>
    <div class="form-row">
        <label for="node-input-objecttype"><i class="icon-search"></i> <span data-i18n="opcua-iiot-contrib.label.objecttype"></span></label>
        <input type="text" id="node-input-objecttype" style="width:40%;" placeholder="">
        <a id="node-lookup-objecttype" class="btn"><i id="node-lookup-topic-icon" class="fa fa-search"></i></a>
    </div>
    <div class="form-row">
        <label for="node-input-datatype"><i class="icon-search"></i> <span data-i18n="opcua-iiot-contrib.label.datatype"></span></label>
        <input type="text" id="node-input-datatype" style="width:40%;" placeholder="">
        <a id="node-lookup-datatype" class="btn"><i id="node-lookup-topic-icon" class="fa fa-search"></i></a>
    </div>
    <div class="form-row">
        <label for="node-input-value"><i class="icon-tag"></i> <span data-i18n="opcua-iiot-contrib.label.value"></span></label>
        <input type="text" id="node-input-value" placeholder="">
    </div>
    <hr>
    <div class="form-row">
        <label for="node-input-referenceNodeId"><i class="icon-tasks"></i>
        <span data-i18n="opcua-iiot-contrib.label.referenceNodeId"></span></label>
        <input type="text" id="node-input-referenceNodeId" placeholder="ns=1;s=MySwitch or ns=1;i=1234">
    </div>
    <div class="form-row">
        <label for="node-input-referencetype"><i class="icon-search"></i> <span data-i18n="opcua-iiot-contrib.label.referencetype"></span></label>
        <input type="text" id="node-input-referencetype" style="width:40%;" placeholder="">
        <a id="node-lookup-referencetype" class="btn"><i id="node-lookup-topic-icon" class="fa fa-search"></i></a>
    </div>
    <hr>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
        <input type="text" id="node-input-name" placeholder="">
    </div>
</script>

<script type="text/x-red" data-help-name="OPCUA-IIoT-Server-ASO">
    <h2>OPC UA IIoT Address Space Object</h2>

    <p>That nodes is to build event driven Address Space Objects (ASO) injects to the server.</p>
</script>
